<template>
  <div class="app-container">
    <div class="demo-collapse" style="width: 80%;margin: 0 auto;">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="订单基本信息" name="1">
          <div style="margin-top: 20px;">
            <el-descriptions :column="2" :size="size" border>
              <el-descriptions-item>
                <template #label>
                  订单编号
                </template>
                {{detailModel.orderNo}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  线上订单编号
                </template>
                {{detailModel.orderLineNo}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    付款时间
                  </div>
                </template>
                {{detailModel.payTime}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    数量
                  </div>
                </template>
                {{detailModel.detailsNum||0}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    单价
                  </div>
                </template>
                {{detailModel.detailsPrice||0}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    备注
                  </div>
                </template>
                {{detailModel.remark||'-'}}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-collapse-item>
        <el-collapse-item title="订单商品" name="2">
          <div>
            <el-table :data="goodsList">
              <el-table-column label="图片" prop="goodsImageUrl" :show-overflow-tooltip="true" width="200">
                <template #default="scope">
                  <el-image style="width: 100px; height: 100px" v-if="scope.row.goodsImageUrl" :src="scope.row.goodsImageUrl" fit="cover" />
                </template>
              </el-table-column>
              <el-table-column label="名称" prop="orderTotalNum" :show-overflow-tooltip="true" width="200">
                <template #default="scope">
                  <div style="display: flex;align-items: center;">
                    {{scope.row.goodsName}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="数量" prop="detailsNum" :show-overflow-tooltip="true" width="200" />
              <el-table-column label="单价" prop="detailsPrice" :show-overflow-tooltip="true" width="200" />
              <el-table-column label="面料" prop="materialName" :show-overflow-tooltip="true" width="200" />
              <el-table-column label="素材" prop="goodsSourceMaterialUrl" :show-overflow-tooltip="true" width="200">
                <template #default="scope">
                  <el-image style="width: 100px; height: 100px" v-if="scope.row.goodsSourceMaterialUrl" :src="scope.row.goodsSourceMaterialUrl" fit="cover" />
                </template>
              </el-table-column>
              <el-table-column label="片图" prop="goodsSliceImageUrl" :show-overflow-tooltip="true" width="200">
                <template #default="scope">
                  <el-image style="width: 100px; height: 100px" v-if="scope.row.goodsSliceImageUrl" :src="scope.row.goodsSliceImageUrl" fit="cover" />
                </template>
              </el-table-column>
              <el-table-column label="美工" align="center" width="100" prop="goodsArtDesigner"></el-table-column>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
                <template #default="scope">
                  <el-button link type="primary" @click="getLogs(scope.row)">日志</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <!-- 添加或修改款式配置对话框 -->
    <el-dialog title="操作日志" v-model="gjOpen" width="700px" append-to-body>
      <div>
        <el-table :data="gjDataList">
          <el-table-column label="工序" prop="produceProcessName" />
          <el-table-column label="处理人" prop="handlerName" />
          <el-table-column label="处理时间" prop="startTime" :show-overflow-tooltip="true" width="200"></el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script setup name="orderDetail">
  import {
    list,
    goodslist,
    logslist
  } from "@/api/order/order"
  const router = useRouter();
  const route = useRoute()
  const { proxy } = getCurrentInstance();
  const detailModel = ref({})
  const activeNames = ref(["1", "2", "3"])
  const goodsList = ref([])
  const gjOpen = ref(false);
  const gjDataList = ref([])
  const data = reactive({
    form: {},
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      orderNo: '',
      orderLineNo: undefined,
      shopsId: undefined,
      orderProduceStatus: '',
    },
    rules: {

    },
  });
  const { queryParams, form, rules } = toRefs(data);
  /** 查询订单列表 */
  function getList() {
    list({
      orderNo: route.query.orderNo
    }).then(response => {
      detailModel.value = response.rows[0];
      getGood(detailModel.value.id)
    });
  }

  function getLogs(row) {
    logslist({
      tenantId: row.tenantId,
      detailsId: row.id
    }).then((res) => {
      gjOpen.value = true;
      gjDataList.value = res.data
    })
  }

  function getGood(id) {
    goodslist({
      id: id
    }).then((res) => {
      goodsList.value = res.data
    })
  }
  getList();
</script>
<style lang="scss" scoped>
  .demo-collapse {
    :deep(.el-collapse-item__header) {
      background: #f4f4f4 !important;
      padding-left: 10px;
    }
  }
</style>